<template>
	<div>
		<div class="top">
			<div class="grass">
				<ul class="main_men">
					<li class="men_tab">种草榜</li>
				</ul>
			</div>
			<!-- 活动分类 -->
			<div class="activity" style="display: inline;">
				<el-radio-group @change="add" style="overflow: hidden;height: 30px;margin: 20px 0;" v-model="radio1"
					fill="#59309f">
					<span>活动分类:</span>
					<el-radio-button label="全部"></el-radio-button>
					<el-radio-button :label="item.AutoId" v-for="(item,index) in ranking.Tags" :key="index">
						{{item.TagName}}
					</el-radio-button>
				</el-radio-group>
			</div>
			<div class="taber">
				<div>
					<span>周榜</span>
					<span>月榜</span>
				</div>
			</div>
		</div>
		<el-tabs type="border-card" class="boder-card" @tab-click="handleClick" v-model="rankType">
			<!-- 播放最多 -->
			<el-tab-pane label="视频最多" name="1">
				<div class="rankad">
					<p>排名</p>
					<p>品牌信息</p>
					<p>视频数量</p>
					<p>达人数量</p>
					<p>播放量</p>
					<p>点赞量</p>
					<p>操作</p>
				</div>
				<div class="rankad_boder" v-for="(item,index) in raek.ItemList" :key="index">
					<p>{{index+1}}</p>
					<div>
						<img v-if="item.Logo" :src="item.Logo">
						<img v-else src="../../assets/wbh-defaultBlogger.png">
					</div>
					<h5>{{item.BrandName}}</h5>
					<p>{{item.VideoCount}}</p>
					<p>{{item.BloggerCount}}</p>
					<p>{{item.ViewCount|moneyFormat}}</p>
					<p>{{item.LikeCount|moneyFormat}}</p>
					<p>查看详情</p>
				</div>
				<!-- 底部分页 -->
				<div class="pagination">
					<el-pagination background layout="prev, pager, next" :total="20" :current-page="currentPage"
						@current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</el-tab-pane>
			<!-- 视频最多 -->
			<el-tab-pane label="播放最多" name="2">
				<div class="rankad">
					<p>排名</p>
					<p>品牌信息</p>
					<p>视频数量</p>
					<p>达人数量</p>
					<p>播放量</p>
					<p>点赞量</p>
					<p>操作</p>
				</div>
				<div class="rankad_boder" v-for="(item,index) in play.ItemList" :key="index">
					<p>{{index+1}}</p>
					<div>
						<img v-if="item.Logo" :src="item.Logo">
						<img v-else src="../../assets/wbh-defaultBlogger.png">
					</div>
					<h5>{{item.BrandName}}</h5>
					<p>{{item.VideoCount}}</p>
					<p>{{item.BloggerCount}}</p>
					<p>{{item.ViewCount|moneyFormat}}</p>
					<p>{{item.LikeCount|moneyFormat}}</p>
					<p>查看详情</p>
				</div>
				<!-- 底部分页 -->
				<div class="pagination">
					<el-pagination background layout="prev, pager, next" :total="20">
					</el-pagination>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import {
		GitRanking,
		GitRaek,
		GitPlay,
		// GitPlay
	} from '@/api/ranking.js'
	export default {
		data() {
			return {
				ranking: [],
				raek: [],
				radio1: '全部',
				play: [],
				rankType: '1',
				currentPage: 1,
			}
		},
		created() {
			this.handleClick();
			this.gitRanking()

			GitPlay({
					r: 0.965158070136072,
					Period: 7,
					DateCode: 20220731,
					rankType: 2,
					pageIndex: 1,
					pageSize: 10,
				})
				.then(res => {
					this.play = res.data.Data;
					console.log(res.data, "sss")
				})
		},
		filters: {
			//取截单元,单位
			moneyFormat: function(arg) {
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 4) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "w"
				}

			}
		},
		methods: {
			handleCurrentChange(val) {
				GitRaek({
						Period: 7,
						DateCode: 20220731,
						rankType: this.rankType,
						pageIndex: val,
						pageSize: 10,
					})
					.then(res => {
						this.raek = res.data.Data;
						// console.log(this.raek, '456')
					})

			},
			gitRanking() {
				GitRanking({
						r: 0.965158070136072,
						Period: 7,
						DateCode: 20220731,
						rankType: 2,
						pageIndex: 1,
						pageSize: 10,
						MainTagId: ''
					})
					.then(res => {
						this.ranking = res.data.Data;
						// console.log(this.ranking)
					})
			},
			handleClick() {
				GitRaek({
						Period: 7,
						DateCode: 20220731,
						rankType: this.rankType,
						pageIndex: 1,
						pageSize: 10,
					})
					.then(res => {
						this.raek = res.data.Data;
						// console.log(this.raek, '456')
					})
			},
			add(e) {
				// this.TagId = this.TId
				GitRaek({
						r: 0.965158070136072,
						MainTagId: e,
						Period: 7,
						DateCode: 20220731,
						rankType: this.rankType,
						pageIndex: 1,
						pageSize: 10,
					})
					.then(res => {
						this.raek = res.data.Data
						console.log(this.raek, '123')
					})
					.catch(err => console.log(err))
			}
		}

	}
</script>

<style>
	.activity .el-radio-button {
		border-radius: 2px;
		display: inline-block;
		padding: 3px 10px 4px 10px !important;
	}

	.activity .el-radio-button__inner {
		padding: 6px 12px !important;
		border: none;
	}

	.activity .el-radio-group span {
		height: 30px;
		display: inline-block;
		vertical-align: inherit;
		font-size: 16px;
		font-weight: 500;
		margin-left: 20px;
	}

	.pagination {
		text-align: center;
		margin-top: 20px;
	}

	.rankad_boder {
		display: flex;
		height: 100px;
		line-height: 100px;
		border-top: 1px solid #ebeef5;
	}

	.rankad_boder h5 {
		font-size: 16px;
		margin-left: 10px;
		margin-top: -10px;
	}

	.rankad_boder p:nth-of-type(1) {
		width: 200px;
		text-align: center;
	}

	.rankad_boder h5 {
		width: 475px;
	}

	.rankad_boder p:nth-of-type(2) {
		width: 200px;
		text-align: center;
	}

	.rankad_boder p:nth-of-type(3) {
		width: 200px;
		text-align: center;
	}

	.rankad_boder p:nth-of-type(4) {
		width: 200px;
		text-align: center;
	}

	.rankad_boder p:nth-of-type(5) {
		width: 200px;
		text-align: center;
	}

	.rankad_boder p:nth-of-type(6) {
		width: 200px;
		text-align: center;
		color: #266eff;
	}

	.rankad_boder div img {
		width: 60px;
		height: 60px;
		border-radius: 50px;
	}

	.boder-card {
		min-width: 1000px;
	}

	.rankad {
		background-color: #f7f8fa;
		display: flex;
		height: 40px;
		line-height: 40px;
		color: #2e384d;
		font-size: 14px;

	}

	.rankad p:nth-of-type(1) {
		width: 200px;
		text-align: center;
	}

	.rankad p:nth-of-type(2) {
		width: 550px;
	}

	.rankad p:nth-of-type(3) {
		width: 200px;
		text-align: center;
	}

	.rankad p:nth-of-type(4) {
		width: 200px;
		text-align: center;
	}

	.rankad p:nth-of-type(5) {
		width: 200px;
		text-align: center;
	}

	.rankad p:nth-of-type(6) {
		width: 200px;
		text-align: center;
	}

	.rankad p:nth-of-type(7) {
		width: 200px;
		text-align: center;
	}

	.taber {
		margin-left: 20px;
		padding-bottom: 20px;
	}

	.taber div span {
		display: inline-block;
		text-align: center;
		line-height: 30px;
		width: 76px;
		height: 30px;
		border: 1px solid #b9c3d2;
		font-size: 13px;
	}
	.taber div span:nth-of-type(1){
		color: #FFFFFF;
		background-color: #5830a0;
	}

	.el-tabs--border-card {
		margin-top: 15px;
	}

	.el-tabs__nav-scroll {
		background-color: #FFFFFF;
		border: none;
	}

	.classify {
		display: flex;
		margin-left: 20px;
		margin-bottom: 20px;
	}

	.classify p:nth-of-type(2) {
		margin-left: 15px;
		color: #666666;
	}

	.classify div {
		margin-left: 20px;
		color: #666666;
	}

	.top {
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.grass {
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 0 8px rgb(0, 25, 141 / 12%);
		border-radius: 2px;
	}

	.grass ul {
		display: flex;
		width: fit-content;
	}

	.grass ul li {
		height: 44px;
		line-height: 44px;
		font-size: 20px;
		padding: 0 25px;
		text-align: center;
		min-width: 140px;
		cursor: pointer;
		border-radius: 2px;
	}

	.grass ul li.men_tab {
		background-color: #5830a0;
		color: #fff;
		border-radius: 4px;
	}
</style>
